<template>
  <div id="articleDetail">
    <div class="loading" v-show="loading_show">
      <img src="../../assets/image/loading1.gif" alt="">
    </div>
    <div class="articleDetail" v-show="articleDetail_show">
      <div class="title">
        <span class="title-icon"></span><h3>{{articleDetail.title}}</h3>
      </div>
      <div class="info">
        <p><span>作者</span><span>{{articleDetail.author}}</span></p>
        <p><span>作者单位</span><span>{{articleDetail.orgniz}}</span></p>
        <p><span>时间</span><span>{{this.$route.query.publishTime}}</span></p>
        <p><span>关键字</span><span>{{articleDetail.kws}}</span></p>
      </div>
      <div class="summary">{{articleDetail.abstract_}}</div>
      <div class="link">
        <a id="download" class="download" :href="articleDetail.downUrl" @click="download_click">下载</a>
        <router-link :to="{
        path: '/previewPdf',
        name:'previewPdf',
        query: {
          previewUrl: articleDetail.previewUrl,
        }
        }" v-show="articleDetail.pdf"><a href="javascript:;">预览</a></router-link>
        <!-- <a :href="previewUrl" target="_blank">预览</a> -->
        <a href="javascript:;" v-show="!articleDetail.pdf" class="disabled">此文章不支持预览功能，请<a style="margin:0;border-bottom:1px solid blue;" href="http://cajviewer.cnki.net/download.html" target="_blank">下载阅读器</a></a>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: "articleDetail",
  data() {
    return {
      articleDetail: "",
      loading_show: true,
      articleDetail_show: false,
      previewUrl: "src/components/preview.html",
      can_click: true,
    };
  },
  methods: {
    getData: function() {
      var self = this;
      $.ajax({
        type: "get",
        data: {
          filename: this.$route.query.filename,
          dbcode: this.$route.query.dbcode
        },
        url: `${ self.$store.state.domain }/article/detail`,
        beforeSend: function (request) {  
           request.setRequestHeader("Authorization",self.$store.state.user.token);
        },
        success: function(data) {
          data.data.downUrl =
            "http://seekerservice.usts.top/api/article/" + data.data.downUrl + `&token=${self.$store.state.user.token}`
          data.data.previewUrl =
            "http://seekerservice.usts.top/api/article/" + data.data.previewUrl
          self.articleDetail = data.data
          // this.loading_show = false
          // this.articleDetail_show = true
          $(".loading").hide()
          $(".articleDetail").show()
        },
        error: function (data) {  
          if (data.responseJSON.message) {
            self.$notify({
              title: 'warning',
              message:data.responseJSON.message,
              type: 'warning'
            });
            self.$store.commit('logout')
          }
        }
      });
    },
    init_style: function() {
      $("#searchInput").addClass("search-up");
      $(".logo").addClass("logo-up");
      $("body").addClass("change-bg");
      $("#footer").removeClass("home-footer");
      $(".start-search").show();
      $('#genre_1').hide()      
      setTimeout(() => {
        $(".mask").show();
      }, 500);
    },
    // 控制10s内只能点一次下载
    download_click: function() {
      if (!this.can_click) {
        event.preventDefault();
      } else {
        $("#download").css("cursor", "not-allowed");
        setTimeout(() => {
          this.can_click = true;
          $("#download").css("cursor", "pointer");
        }, 10000);
      }
      this.can_click = false;
    }
  },
  mounted: function() {
    this.init_style();
    this.getData();
    window.scrollTo(0,0)
  }
};
</script>

<style>
.change-bg {
  background: white;
  overflow: auto;
}
.articleDetail {
  display: none;
  padding-top: 16em;
  width: 65%;
  min-width: 800px;
  margin: 0 auto;
  text-align: left;
  color: gray;
  overflow: auto;
  margin-bottom: 55px;
}
.articleDetail div {
  margin-top: 15px;
}
.articleDetail .title {
  display: flex;
  align-items: center;
}
.articleDetail .title-icon {
  display: inline-block;
  height: 20px;
  width: 10px;
  background: #56dca2;
  margin-right: 10px;
}
.articleDetail .info span {
  display: inline-block;
  margin-top: 2px;
  letter-spacing: 1px;
  color: gray;
  min-width: 80px;
}
.articleDetail .summary {
  color: rgb(48, 47, 47);
  line-height: 24px;
  text-indent: 28px;
  word-spacing: 1px;
  /* word-break: break-all; */
}
.articleDetail .link {
  float: right;
}
.articleDetail .link a {
  color: #0784bc;
  margin-right: 30px;
  margin-left: 20px;
}
.articleDetail .link .disabled {
  color: gray;
  cursor:unset;
}

/*媒体查询兼容移动端*/
@media screen and (max-width:700px) {
  .articleDetail{
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 26vh;
  }
  .articleDetail .link a {
    margin-right: 10px;
  }
}
</style>
